<template>
    <div class="service_page">
        <div class="service_page-banner">
            <div class="max-w-[766px] mx-auto text-center">
                <h3>{{ $t("service.text1") }}</h3>
                <span class="line"></span>
                <p>
                    {{ $t("service.text2") }}
                </p>
            </div>
        </div>
        <div class="maxWidth1400">
            <ul class="menuList">
                <li
                    v-for="itemMenu in props.tabList"
                    :key="itemMenu.key"
                    @mouseover="handleMouseover"
                    @mouseleave="handleMouseleave"
                >
                    <a
                        href="javascript:void(0)"
                        :class="[
                            [`${itemMenu.key}Img`],
                            itemMenu.key === $route.params.slug ? 'active' : '',
                        ]"
                        @click="
                            $router.push({
                                path: itemMenu.path,
                                query: { key: itemMenu.key },
                            })
                        "
                    >
                        <div class="imgWrapper">
                            <img
                                v-show="itemMenu.key === 'fund'"
                                :src="state.fundImgSrc"
                            />
                            <img
                                v-show="itemMenu.key === 'externalAsset'"
                                :src="state.externalAssetImgSrc"
                            />
                            <img
                                v-show="itemMenu.key === 'familyTrust'"
                                :src="state.familyTrustImgSrc"
                            />
                            <img
                                v-show="itemMenu.key === 'investConsult'"
                                :src="state.investConsultImgSrc"
                            />
                        </div>
                        <span>{{ itemMenu.title() }}</span></a
                    >
                </li>
            </ul>
            <div
                class="service_page-content"
                v-if="state.activeData?.attribute1"
            >
                <div v-aos.once="['animate__fadeInLeft']" class="content_left">
                    <CustomImage
                        :srcUrl="state.activeData?.attribute1"
                        class="w-full h-full"
                    />
                    <i></i>
                </div>
                <div
                    v-aos.once="['animate__fadeInRight']"
                    class="content_right"
                >
                    <h3>{{ state.activeData?.subtitle }}</h3>
                    <h4>{{ state.activeData?.title }}</h4>
                    <p>
                        {{ state.activeData?.titleDesc }}
                    </p>
                    <div class="yellow_block"></div>
                    <div class="yellow_line"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import fundImg from "/assets/image/service/fund.png";
import externalAssetImg from "/assets/image/service/externalAsset.png";
import familyTrustImg from "/assets/image/service/familyTrust.png";
import investConsultImg from "/assets/image/service/investConsult.png";
import fundImg_active from "/assets/image/service/fund_active.png";
import externalAssetImg_active from "/assets/image/service/externalAsset_active.png";
import familyTrustImg_active from "/assets/image/service/familyTrust_active.png";
import investConsultImg_active from "/assets/image/service/investConsult_active.png";

import fund_leftImg from "/assets/image/service/fund_left.jpg";
import externalAsset_leftImg from "/assets/image/service/externalAsset_left.jpg";
import familyTrust_leftImg from "/assets/image/service/familyTrust_left.jpg";
import investConsult_leftImg from "/assets/image/service/investConsult_left.jpg";
const props = defineProps({
    tabList: {
        type: Array,
        default: () => [],
    },
});
const { locale } = useI18n();
const route = useRoute();
const state = reactive({
    fundImgSrc: fundImg,
    externalAssetImgSrc: externalAssetImg,
    familyTrustImgSrc: familyTrustImg,
    investConsultImgSrc: investConsultImg,
    businessList: [],
    activeData: {},
});

const getBusinessList = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 108,
        },
    });
    if (res?.rows.length) {
        const serviceMenuKeys = [
            "fund",
            "externalAsset",
            "familyTrust",
            "investConsult",
        ];
        res.rows.forEach((item, index) => {
            item.key = serviceMenuKeys[index];
            if (item.key === route.params.slug) {
                state.activeData = item;
            }
        });
        state.businessList = res.rows;
    } else {
        state.businessList = [];
        state.activeData = {};
    }
};

// 监听路由默认显示active状态图标
watch(
    () => route.params.slug,
    (val) => {
        getBusinessList();
        if (route.params.slug === "fund") state.fundImgSrc = fundImg_active;
        if (route.params.slug === "externalAsset")
            state.externalAssetImgSrc = externalAssetImg_active;
        if (route.params.slug === "familyTrust")
            state.familyTrustImgSrc = familyTrustImg_active;
        if (route.params.slug === "investConsult")
            state.investConsultImgSrc = investConsultImg_active;
    },
    {
        immediate: true,
    }
);
watch(
    () => locale.value,
    (val) => {
        getBusinessList();
    }
);
// const leftImgComp = computed(() => {
//     if (route.params.slug === "fund") return fund_leftImg;
//     if (route.params.slug === "externalAsset") return externalAsset_leftImg;
//     if (route.params.slug === "familyTrust") return familyTrust_leftImg;
//     if (route.params.slug === "investConsult") return investConsult_leftImg;
// });

const handleMouseover = (e) => {
    const menuItem = e.currentTarget.querySelector("a").classList[0];
    switch (menuItem) {
        case "fundImg":
            state.fundImgSrc = fundImg_active;
            break;
        case "externalAssetImg":
            state.externalAssetImgSrc = externalAssetImg_active;
            break;
        case "familyTrustImg":
            state.familyTrustImgSrc = familyTrustImg_active;
            break;
        case "investConsultImg":
            state.investConsultImgSrc = investConsultImg_active;
            break;
    }
};

const handleMouseleave = (e) => {
    const menuItem = e.currentTarget.querySelector("a").classList[0];
    const menuItemActive = e.currentTarget.querySelector("a").classList[1];
    switch (menuItem) {
        case "fundImg":
            state.fundImgSrc =
                menuItemActive === "active" ? fundImg_active : fundImg;
            break;
        case "externalAssetImg":
            state.externalAssetImgSrc =
                menuItemActive === "active"
                    ? externalAssetImg_active
                    : externalAssetImg;
            break;
        case "familyTrustImg":
            state.familyTrustImgSrc =
                menuItemActive === "active"
                    ? familyTrustImg_active
                    : familyTrustImg;
            break;
        case "investConsultImg":
            state.investConsultImgSrc =
                menuItemActive === "active"
                    ? investConsultImg_active
                    : investConsultImg;
            break;
    }
};
</script>

<style lang="scss" scoped>
.service_page {
    &-banner {
        padding: 64px 0 196px;
        background: url("/assets/image/service/serveBar.jpg") no-repeat center
            center;
        background-size: cover;
        color: #fff;
        h3 {
            font-size: 24px;
            letter-spacing: 3px;
        }
        p {
            font-size: 14px;
            line-height: 28px;
        }
        .line {
            display: block;
            width: 55px;
            height: 1px;
            background: #ffc600;
            margin: 20px auto;
        }
    }
    .menuList {
        display: flex;
        align-items: center;
        background-color: #fff;
        box-shadow: 0px 0px 17.22px 3.78px rgba(0, 0, 0, 0.05);
        margin-top: -80px;
        li {
            width: 25%;
            height: 160px;
            display: flex;
            align-items: center;
            &:last-child {
                a {
                    border-right: none;
                }
            }
            a {
                width: 100%;
                height: 100%;
                font-size: 18px;
                color: #666;
                border-right: 1px solid rgba(0, 0, 0, 0.12);
                text-align: center;
                transition: all 0.4s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                &.active,
                &:hover {
                    background-color: #0058ce;
                    .imgWrapper {
                        border: 1px solid #fff;
                    }
                    span {
                        color: #fff;
                    }
                }
                .imgWrapper {
                    border: 1px solid #0058ce;
                    padding: 10px;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
@media screen and (max-width: 1500px) {
    .service_page {
        .menuList {
            margin-top: -80px;
            li {
                height: 160px;
            }
        }
    }
}
</style>
